{{ with .Site.Params.fontSize | default 16 }}
    $fontSize: {{ . }}px;
{{ end }}
{{ with .Site.Params.lineHeight | default 2 }}
    $lineHeight: {{ . }};
{{ end }}
{{ with .Site.Params.postWidth | default 42 }}
    $postWidth: {{ . }}em;
{{ end }}
{{ with .Site.Params.listWidth | default 42 }}
    $listWidth: {{ . }}em;
{{ end }}

{{ if .Site.Params.enableBackToTopAutoHide }}
    $enableBackToTopAutoHide: true;
{{ else }}
    $enableBackToTopAutoHide: false;
{{ end }}

{{ with .Site.Params.tabSize | default 4 }}
    $tabSize: {{ . }};
{{ end }}

{{ if .Site.Params.enableChinesePunctuationGlyphCorrection }}
    {{ .Scratch.Set "glyph" "'glyph-correction', " }}
    $glyph: true;
    .drop-cap {
        margin-top: $fontSize !important;
    }
{{ else }}
    {{ .Scratch.Set "glyph" "" }}
{{ end }}
{{ $glyph := .Scratch.Get "glyph" }}

{{ with .Site.Params.fontFamilySiteBrand }}
    $fontFamilySiteBrand: {{ $glyph }}{{ . }};
{{ end }}
{{ with .Site.Params.fontFamilyMenu }}
    $fontFamilyMenu: {{ $glyph }}{{ . }};
{{ end }}
{{ with .Site.Params.fontFamilyTitle }}
    $fontFamilyTitle: {{ $glyph }}{{ . }};
{{ end }}
{{ with .Site.Params.fontFamilyHeadings }}
    $fontFamilyHeadings: {{ $glyph }}{{ . }};
{{ end }}
{{ with .Site.Params.fontFamilyCode }}
    $fontFamilyCode: {{ $glyph }}{{ . }};
{{ end }}
{{ with .Site.Params.fontFamilyQuote }}
    $fontFamilyQuote: {{ $glyph }}{{ . }};
{{ end }}
{{ with .Site.Params.fontFamilyTOC }}
    $fontFamilyTOC: {{ $glyph }}{{ . }};
{{ end }}
{{ with .Site.Params.fontFamilyCaption }}
    $fontFamilyCaption: {{ $glyph }}{{ . }};
{{ end }}
{{ with .Site.Params.fontFamilyFooter }}
    $fontFamilyFooter: {{ $glyph }}{{ . }};
{{ end }}
{{ with .Site.Params.fontFamilyBody }}
    $fontFamilyBody: {{ $glyph }}{{ . }};
{{ end }}

{{ with .Site.Params.duration | default 0.5 }}
    $duration: {{ . }}s;
{{ end }}

{{ with .Site.Params.primaryColorLight | default "220, 90%, 56%" }}
    {{ $number := (split (replace . "%" "") ", ") }}
    {{ range $index, $value := $number }}
        {{ if eq $index 0 }}
            $primaryColorLightH: {{ $value | int }};
        {{ end }}
        {{ if eq $index 1 }}
            $primaryColorLightS: {{ $value | int }}%;
        {{ end }}
        {{ if eq $index 2 }}
            $primaryColorLightL: {{ $value | int }}%;
        {{ end }}
    {{ end }}
{{ end }}
@import "_variables/light.scss";

{{ if .Site.Params.enableDarkMode }}
    {{ with .Site.Params.primaryColorDark | default "201, 65%, 62%" }}
        {{ $number := (split (replace . "%" "") ", ") }}
        {{ range $index, $value := $number }}
            {{ if eq $index 0 }}
                $primaryColorDarkH: {{ $value | int }};
            {{ end }}
            {{ if eq $index 1 }}
                $primaryColorDarkS: {{ $value | int }}%;
            {{ end }}
            {{ if eq $index 2 }}
                $primaryColorDarkL: {{ $value | int }}%;
            {{ end }}
        {{ end }}
    {{ end }}
    @import "_variables/dark.scss";
    #theme-toggle {
        padding: 1em;
        cursor: pointer;
        float: right;
        position: relative;
        z-index: 4;
    }
    [data-theme="dark"] img {
        filter: brightness(50%);
    }
{{ end }}

{{ if and .Site.IsMultiLingual .Site.Params.enableLangToggle }}
    @import "_common/multilingual.scss";
{{ end }}

@import "_common/base.scss";

@import "_common/data-attributes.scss";

@import "_common/fonts.scss";

{{ if .Site.Params.enableChinesePunctuationGlyphCorrection }}
    @import "_common/fonts-src.scss";
{{ end }}

{{ if .Site.Params.enableHeader }}
    @import "_common/header.scss";
    .site-brand {
        {{ with .Site.Params.siteBrandBackgroundColor }}
            background-color: {{ . }}
        {{ end }}
        {{ with .Site.Params.siteBrandBackgroundImage }}
            background-image: {{ . }};
        {{ end }}
    }
    {{ if .Site.Params.siteBrandSVG }}
        .brand {
            width: {{ .Site.Params.siteBrandSVGWidth }}px;
            height: {{ .Site.Params.siteBrandSVGHeight }}px;
            fill: {{ .Site.Params.siteBrandSVGFill }};
        }
    {{ else }}
        .brand {
            font-size: {{ .Site.Params.siteBrandFontSize }}em;
            color: {{ .Site.Params.siteBrandFontColor }};
            text-decoration: none;
            &:hover {
                color: {{ .Site.Params.siteBrandFontColor }};
            }
        }
    {{ end }}
{{ end }}

{{ if .Site.Params.enableMenu }}
    @import "_common/menu.scss";
{{ end }}

{{ if or .Site.Params.enablePostMeta .Site.Params.enablePostMetaInHome }}
    @import "_common/post-meta.scss";
{{ end }}

@import "_common/single.scss";
{{ if .Site.Params.enableAnchorAutoHide }}
    :root {
        --anchor-opacity: 0;
    }
    .anchor-link {
        opacity: var(--anchor-opacity);
        transition: all ($duration / 2);
    }
    .post {
        h1, h2, h3, h4, h5, h6, .anchor-link {
            &:hover {
                --anchor-opacity: 1;
            }
        }
    }
{{ end }}
{{ with .Site.Params.footnoteReturnLinkIcon }}
    .footnote-icon {
        fill: alpha(var(--color-contrast-high), 0.5);
        transition: fill $duration;
        &:hover {
            fill: var(--color-primary);
        }
    }
{{ end }}
{{ if .Site.Params.enableEmphasisPoint }}
    @import "_common/emphasis-point.scss";
{{ end }}

{{ if .Site.Params.enableParagraphIndent }}
    @import "_common/indent.scss";
{{ end }}

{{ if .Site.Params.enablePostCopyright }}
    @import "_common/post-copyright.scss";
{{ end }}

{{ if .Site.Params.enablePostUpdatedBadge }}
    @import "_common/updated-badge.scss";
{{ end }}

{{ if .Site.Params.enablePostGitInfo }}
    @import "_common/post-gitinfo.scss";
{{ end }}

{{ if .Site.Params.enableRelatedPosts }}
    @import "_common/related-posts.scss";
{{ end }}

{{ if .Site.Params.enablePostTags }}
    @import "_common/post-tags.scss";
{{ end }}

{{ if .Site.Params.enableMinimalFooter }}
    @import "_common/minimal-footer.scss";
{{ end }}

{{ if .Site.Params.enableAboutPageMinimalFooter }}
    @import "_common/minimal-footer-about.scss";
{{ end }}

{{ if .Site.Params.enablePostNav }}
    @import "_common/post-nav.scss";
{{ end }}

{{ if .Site.Params.enableComments }}
    @import "_common/comments.scss";
{{ end }}

@import "_common/list.scss";
{{ if eq .Site.Params.listDatePosition "right" }}
    .list-item-title {
        flex: 1;
    }
    .list-item-time {
        text-align: right;
        margin-left: 1em;
    }
{{ end }}
{{ if eq .Site.Params.listDatePosition "left" }}
    .list-item {
        flex-direction: row-reverse;
    }
    .list-item-time {
        flex: 1;
    }
    .list-item-title {
        text-align: right;
        margin-left: 1em;
    }
{{ end }}

{{ if .Site.Params.enableBackToTop }}
    @import "_common/back-to-top.scss";
{{ end }}

{{ if .Site.Params.enableFooter }}
    @import "_common/footer.scss";
    {{ with .Site.Params.iconColor }}
        .footer-icon {
            fill: {{ . }};
        }
    {{ end }}
    {{ if .Site.Params.iconAnimation }}
        @keyframes heartbeat {
            0%, 100% {
                transform: scale(1);
            }
            10%, 30% {
                transform: scale(0.9);
            }
            20%, 40%, 50%, 60%, 70%, 80% {
                transform: scale(1.1);
            }
        }
        .footer-icon {
            animation: heartbeat 1.33s ease-in-out infinite;
        }
    {{ end }}
    {{ if and .Site.Params.displayBusuanziSiteUVAndPV (eq hugo.Environment "production") }}
        @import "_common/busuanzi.scss";
    {{ end }}
{{ end }}

{{ if eq .Site.Params.homeLayout "poetry" }}
    @import "_common/_page/home-poetry.scss";
    .links-item {
        padding: {{ .Site.Params.homeLinksPadding }}em;
        display: inline-block;
    }
{{ end }}
{{ if eq .Site.Params.homeLayout "footage" }}
    @import "_common/_page/home-footage.scss";

    {{ if strings.HasPrefix .Site.Params.homePoster "." }}
        {{ $homePoster := printf `.%s` .Site.Params.homePoster }}
        {{ .Scratch.Set "homePoster" $homePoster }}
    {{ else }}
        {{ .Scratch.Set "homePoster" .Site.Params.homePoster }}
    {{ end }}
    {{ $homePoster := .Scratch.Get "homePoster" }}

    .home::before {
        background-image: url({{ $homePoster }});
    }
{{ end }}
{{ if eq .Site.Params.homeLayout "posts" }}
    @import "_common/_page/home-posts.scss";
{{ end }}

@import "_common/_page/404.scss";
{{ if strings.HasPrefix .Site.Params.fofPoster "." }}
    {{ $fofPoster := printf `.%s` .Site.Params.fofPoster }}
    {{ .Scratch.Set "fofPoster" $fofPoster }}
{{ else }}
    {{ .Scratch.Set "fofPoster" .Site.Params.fofPoster }}
{{ end }}
{{ $fofPoster := .Scratch.Get "fofPoster" }}
.fof::before {
    background-image: url({{ $fofPoster }});
}

{{ if .Site.Params.enableHighlight }}
    @import "_common/highlight.scss";
    @import "_common/_highlight/light.scss";
    .chroma {
        color: var(--color-contrast-high);
        background-color: alpha(var(--color-contrast-lower), 0.5);
    }
    {{ if .Site.Params.enableDarkMode }}
        @import "_common/_highlight/dark.scss";
        .chroma-dark {
            color: var(--color-contrast-high);
            background-color: alpha(var(--color-contrast-lower), 0.5);
        }
    {{ end }}
{{ end }}

{{ if .Site.Params.enableMediumZoom }}
    @import "_common/medium-zoom.scss";
{{ end }}

{{ if and .Site.Params.enableServiceWorker (eq hugo.Environment "production") }}
    @import "_common/sw-notification.scss";
{{ end }}

@import "_common/responsive.scss";

@import "_custom/custom.scss";
